<script>
import QSGSearchBar from "@/components/QSGSearchBar/index.vue";
import {changeStatus, deleteBatch, getRolesPageList} from "@/api/aihuman/roles";
import AddRole from "@/views/aihuman/roles/AddRole.vue";

export default {
  name: "Roles",
  components: {AddRole, QSGSearchBar},
  props: {
    tag: {
      type: String,
      default: 'huilan-basic'
    },
    isPage: {
      type: Boolean,
      default: true
    }
  },
  data() {
    return {
      page: {
        pageSize: 10,
        currentPage: 1,
        total: 0,
        pageSizes: [10, 20, 30, 40, 50, 100],
      },
      option: {
        tip: false,
        selection: false,
        header: false,
        height: 'auto',
        addBtn: false,
        editBtn: false,
        viewBtn: false,
        delBtn: false,
        searchBtn: false,
        columnBtn: false,
        refreshBtn: false,
        stripe: false,
        menuWidth: 260,
        menuAlign: "center",
        emptyText: this.$t('aicosCommon.notData'),
        labelWidth: 120,
        index: true,
        column: [
          {
            label: '角色ID',
            prop: 'id'
          },
          {
            label: '角色名称',
            prop: 'name',
          },
          {
            label: '性别',
            prop: 'sex',
            dicData: [
              {
                label: '男',
                value: 1
              },
              {
                label: '女',
                value: 2
              },
              {
                label: '其他',
                value: 3
              }
            ]
          },
          {
            label: '年龄(岁)',
            prop: 'age'
          },
          {
            label: '身高(cm)',
            prop: 'height'
          },
          {
            label: '角色描述',
            prop: 'description',
            overHidden: true,

          },
          {
            label: '状态',
            prop: 'status',
            hide: !this.isPage,
            dicData: [
              {
                label: '已上架',
                value: 1
              },
              {
                label: '未上架',
                value: 0
              }
            ]
          },
          {
            label: '创建时间',
            prop: 'createTime'
          },
        ]
      },
      list: [],
      searchForm: {
        name: ''
      },
      listOption: [
        {
          placeholder: '请输入名称',
          prop: 'name'
        }
      ]
    }
  },
  created() {
    this.getRolesList()
  },
  methods: {
    addRole() {
      this.$refs.dialog.open('add')

    },
    toggleStatus(val) {
      changeStatus({id: val.id, status: val.status ^ 1}).then(res => {
        this.getRolesList()
      })
    },
    editRole(val) {
      this.$refs.dialog.open('edit', val)
    },
    removeRole(val) {
      this.$confirm('确定要删除这个角色吗?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        deleteBatch({ids: val.id}).then(res => {
          this.$message({
            type: 'success',
            message: '删除成功!'
          });
          this.getRolesList()
        })
      }).catch(() => {

      });
    },
    configColumn() {
      this.$refs.listRef.$refs.dialogColumn.columnBox = true;
    },
    getRolesList() {
      this.$nextTick(async () => {
        const params = {
          pageNo: this.page.currentPage,
          pageSize: this.page.pageSize,
          ...this.searchForm

        }
        const {data} = await getRolesPageList(params)
        console.log(data);
        this.list = data.data.records
        this.page.total = data.data.total
      })
    }
  }
}
</script>

<template>
  <component :is="tag">
    <huilan-basic-toolbar>
      <el-button type="primary" size="small" @click="addRole">新增</el-button>
    </huilan-basic-toolbar>

    <HuilanBasicSearchbar :model="searchForm" :fields="listOption" @search="getRolesList" @reset="getRolesList">
      <template v-slot:appendTool>
        <el-button type="default" @click="configColumn"><i class="el-icon-s-operation"></i></el-button>
      </template>
    </HuilanBasicSearchbar>
    <avue-crud
      ref="listRef"
      :option="option"
      :data="list"
      :page.sync="page"
    >
      <template #menu="{row}">
        <template v-if="isPage">
          <el-button v-if="row.status === 0" type="text" @click="toggleStatus(row)">上架</el-button>
          <el-button v-else type="text" @click="toggleStatus(row)">下架</el-button>
        </template>
        <el-button type="text" @click="editRole(row)">编辑</el-button>
        <el-button type="text" @click="removeRole(row)">删除</el-button>
      </template>
    </avue-crud>

    <add-role
      ref="dialog"
      @save="getRolesList"
    />
  </component>
</template>

<style scoped lang="scss">

</style>
